<script setup>
import { ref } from 'vue'

// import { userSendCodeService } from '@/api/login'
import { updateUserInfoService } from '@/api/user'
import { Edit, Message, Grid } from '@element-plus/icons-vue'
import bus from '@/utils/bus'

const isShowEmailEditing = ref(false)

const formModel = ref({
    email: '',
    code: ''
})
const formRef = ref()

//禁止重复点击
const disabled = ref(false)

//发送验证码
const onSend = () => {
    //验证通过 err：true, 反之为：false
    formRef.value.validateField('e_mail', async (err) => {
        if (err) {
            if (!yz.value.timer && yz.value.total === yz.value.curry) {
                disabled.value = true
                try {
                    await userSendCodeService({ e_mail: formModel.value.e_mail })
                    ElMessage.success('验证码已发送，一分钟之内有效，请注意查收')
                    //开启定时器
                    yz.value.timer = setInterval(() => {
                        yz.value.curry--
                        if (yz.value.curry <= 0) {
                            clearInterval(yz.value.timer)
                            yz.value.timer = null
                            yz.value.curry = yz.value.total
                            disabled.value = false
                        }
                    }, 1000)
                } finally {
                    disabled.value = false
                }
            }
        } else {
            ElMessage.error('请输入正确的邮箱地址')
            return
        }
    })
}

const yz = ref({
    total: 60,
    curry: 60,
    timer: null
})

const rules = ref({
    e_mail: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
        }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        {
            pattern: /^\d{6}$/,
            message: '验证码必须是6位的数字',
            trigger: 'blur'
        }
    ]
})

const emailUpdate = async () => {
    await formRef.value.validate()
    await updateUserInfoService(formModel.value)
    bus.emit('updateInfo')
    close()
}

const close = () => {
    isShowEmailEditing.value = false
    formModel.value = {
        email: '',
        code: ''
    }
}
</script>
<template>
    <div class="space" style="display: flex">
        <span>绑定邮箱：</span>
        <span style="color: rgb(147, 147, 147)">已设置</span>

        <span @click="isShowEmailEditing = !isShowEmailEditing" class="edit-btn">
            <el-icon>
                <Edit />
            </el-icon>修改
        </span>
    </div>

    <transition :duration="300" name="animate__animated animate__zoomOut" appear enter-active-class="animate__fadeIn"
        leave-active-class="animate__fadeOut ">
        <div v-show="isShowEmailEditing">
            <el-form ref="formRef" :model="formModel" :rules="rules" class="form-css">
                <el-form-item prop="email">
                    <el-input v-model="formModel.email" placeholder="请输入邮箱名" :prefix-icon="Message">
                        <template #append>
                            <el-button type="primary" :disabled="disabled" @click="onSend">{{
                                yz.total === yz.curry ? '获取验证码' : yz.curry + 's后重新发送'
                                }}</el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-input v-model="formModel.code" placeholder="请输入验证码" :prefix-icon="Grid">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="emailUpdate" type="primary">确 定</el-button>
                    <el-button @click="close">取 消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </transition>
</template>
<style scoped lang="scss">
.form-css {
    max-width: 400px;
}

.space {
    margin: 0.5rem 0;
    margin-bottom: 1rem;
}

.edit-btn {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    color: rgb(23, 81, 153);
    white-space: nowrap;
    cursor: pointer; // 鼠标放上去显示手势
}
</style>
